PreferencesPanel = function() {
	var server =  new Ext.grid.PropertyGrid({
		title:'Server',
		iconCls: 'server-icon',
		id: 'preferencesServer'
	});
	
	

	// data store for preferences
	var serverData = new Ext.data.JsonStore({
		url: '/xhr/preferences/server.php',
		root: 'results',
		fields: [
			{name:'(name)', mapping:'name'},
			{name:'bindVersion'},
			{name:'dbDriver'},
			{name:'phpVersion'},
			{name:'dbVersion'},
			{name:'debug'},
			{name:'appVersion'},
			{name:'uptime'},
			{name:'network'}
		]
	});
	
	// load server preferences
	serverData.load({
		callback: function(r, options, success){
			if (success){
				server.setSource(serverData.getAt(0).data);
				
				console.debug('success');
				
				Ext.ux.Status.log({
					msg: "Server preferences loaded.",
					type: 'notice'
				});
				
				
				// check if network is 200 (OK)
				if (serverData.getAt(0).data.network == 200) {
					ExtBIND.App.getToolBar().setStatusOnline();
				} else {
					ExtBIND.App.getToolBar().setStatusOffline();
				}
				
			
				
				
			} else {
				// failure
				console.debug('failure');
				Ext.ux.Status.log({
					msg: "Cannot load server preferences. XHR failure!",
					type: 'error'
				});
			}
		}
	});
	
	var themeData = new Ext.data.SimpleStore({
	fields: ['display', 'value'],
		data: [
			['Black', 'ext-2.2/resources/css/xtheme-black.css'],
			['Blue', 'ext-2.2/resources/css/ext-all.css'], 
			['Dark Gray', 'ext-2.2/resources/css/xtheme-darkgray.css'],
			['Gray (Default)', 'ext-2.2/resources/css/xtheme-gray.css'],
			['Olive', 'ext-2.2/resources/css/xtheme-olive.css'],
			['Purple', 'ext-2.2/resources/css/xtheme-purple.css'],
			['Slate', 'ext-2.2/resources/css/xtheme-slate.css'],
			['Slickness', 'ext-2.2/resources/css/xtheme-slickness.css']
		]
	});
	
	var comboTheme = new Ext.form.ComboBox({
		store: themeData,
		displayField:'display',
		editable: false,
		forceSelection: true,
		emptyText: "Select Theme",
		mode: 'local',
		fieldLabel: "Theme",
		triggerAction: 'all',
		selectOnFocus:true,
		resizable:false,
		listWidth: 100,
		width: 100,
		valueField: 'value'
	});
	
	comboTheme.on('select', function(combo){ 
		Ext.util.CSS.swapStyleSheet('theme', combo.getValue()); 
	}, this);
	
	
	var themes = new Ext.Panel({
		title: 'Themes',
		items: new Ext.FormPanel({
			labelWidth: 60, // label settings here cascade unless overridden
			frame:true,
			bodyStyle: 'padding:5px 5px 5px 5px',
			items: [comboTheme]
		}),
		iconCls: 'theme-icon'
	});
	

	
	PreferencesPanel.superclass.constructor.call(this, {
		region:'east',
		title:'Preferences',
		iconCls:'preferences-icon',
		collapsible:true,
		split:true,
		width:225,
		minSize:175,
		id: 'preferencesPanel',
		maxSize:400,
		layout:'fit',
		margins:'0 5 0 0',
		items: new Ext.Panel({
			border:false,
			layout:'accordion',
			defaults: {
				// applied to each contained panel
			},
			layoutConfig: {
				animate: true,
				activeOnTop: true
			},items:[
				server,
				{	
					title:'Account',
					html: '<p>Place holder for account settings. Available in the beta version!</p>',
					iconCls: 'account-icon'
					
				},{
					title: 'Settings',
					html: '<p>Place holder for system settings. Available in the beta version!</p>',
					iconCls: 'settings-icon'
					
				},
				themes
			]
		})
	});
	
	
	// public method for getting at serverData
	this.getServerData = function() {
		return serverData;
	}
	
};

Ext.extend(PreferencesPanel, Ext.Panel, {
	
});